<template>
  <div class="sourceApplyApproval" v-loading="loading">
    <plainTable
      :tableData="tableData1"
      :tableConfigData="tableConfigData1"
      @toUpdateCost="toUpdateCost"
      @verify="onClickVerify"
      @chooseFile="handleChooseFile"
      @removeFile="handleRemoveFile"
      :pageInfo="pageInfo" 
      @prevPage="handlePrevPage" 
      @nextPage="handleNextPage"
    />
    <el-dialog v-model="updateCostDialogVisible" width="80%" class="my-dialog">
        <plainTable :tableData="tableData2" :tableConfigData="tableConfigData2" @confirmUpdateCost="confirmUpdateCost" @updateTotal="updateTotal" />
    </el-dialog>
  </div>
</template>

<script setup>
import plainTable from "@/components/plainTable.vue";
import { useSourceApplyApproval } from "@/hooks/index";
import { useUserStore } from "@/store/index";
import { reqModifyUserCost } from '@/api/index';
import { ElMessage } from "element-plus";
import { ref } from "vue";

const { loading, tableData1, tableConfigData1, verifyIt,initData,pageInfo,prevPage,nextPage } =
  useSourceApplyApproval();
const userStore = useUserStore();
// 审核
const onClickVerify = (info, action) => {
  verifyIt({
    ouser_id: userStore.ouser_id,
    ucid: info.ucid,
    status: action,
  });
};


// 更新费用
// const onClickUpdateCost = (info) => {
//     clog("更新费用参数：",info);
//     updateCost({
//         ouser_id: userStore.ouser_id,
//         ucid: info.user_id, // ? ucid是啥 TODO 暂时取user_id
//         rate: info.exchange_rate,
//         cost: info.costUpdate,
//     });
// }

const handleChooseFile = (info) => {
  clog("选择文件参数：", info);
  // console.log('uploadFile', info);
  // const targetIndex = tableData1.value.findIndex((item) => item.busiId === info.busiId);
  // tableData1.value[targetIndex].uploadFile = info.file;
  // console.log(tableData1.value);
};

const handleRemoveFile = (info) => {
  clog("移除文件参数：", info);
  // const targetIndex = tableData1.value.findIndex((item) => item.busiId === info.busiId);
  // tableData1.value[targetIndex].uploadFile = null;
};

// #region 更新费用弹窗
const updateCostDialogVisible = ref(false);
const tableConfigData2 = ref([
  {
    prop: "busiId",
    label: "商戶號",
  },
  {
    prop: "country",
    label: "國別",
  },
  {
    prop: "currency",
    label: "貨幣",
  },
  {
    prop: "type",
    label: "类别",
  },
  {
    prop: "payMethod",
    label: "支付方式",
  },
  {
    prop: "constantCost",
    label: "固定費用",
  },
  {
    prop: "priceRate",
    label: "費率",
  },
  {
    prop: "priceValue",
    label: "費用",
  },
  {
    prop: "getMethod",
    label: "結算天数",
  },
  {
    prop: "status",
    label: "狀態",
  },
  {
    prop: "confirmCostUpdate",
    label: "操作",
  },
  // {
  //   prop: "remark",
  //   label: "備註",
  // },
]);
const tableData2 = ref([]);
const toUpdateCost = (info) => {
  console.log("toUpdateCost", info);
  tableData2.value = [{
    ...info,
    busiId: info.busiId,
    country: info.country,
    currency: info.currency,
    type: info.type,
    payMethod: info.payMethod,
    constantCost: info.cost,
    priceRate: info.rate,
    priceValue: `${info.cost}+${info.rate}%`,
    getMethod: info.settlement_method,
    status: info.status,
  }];
  updateCostDialogVisible.value = true;
};
const confirmUpdateCost = async (info) => {
 console.log("confirmUpdateCost", info);
 loading.value = true;
 try {
  const res = await reqModifyUserCost({
    ouser_id: userStore.ouser_id,
    ucid: info.ucid,
    rate: info.priceRate,
    cost: info.constantCost
  });
  clog("更新费用返回值：", res);
  loading.value = false;
  ElMessage.success('更新成功!');
  updateCostDialogVisible.value = false;
  initData({
    page: 1,
    level: 1,
  });
 }catch(err) {
  loading.value = false;
  ElMessage.error('更新失败!');
 }
}
const updateTotal = (info) => {
    const tmpPriceValue = `${info.constantCost}+${info.priceRate}%`;
    tableData2.value[0].priceValue = tmpPriceValue;
    console.log("updateTotal", tableData2.value);
}
// #endregion 更新费用弹窗
const handlePrevPage = () => {
    prevPage();
}

const handleNextPage = () => {
    nextPage();
}
</script>
<style lang="scss" scoped>
.table1 {
  margin-bottom: 31px;
}
:deep(.my-dialog) {
  .plain-table {
    box-shadow: unset;
  }
}
</style>
